<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" oktext="下载">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" >
                    <div class="center-flex">
                        <a-radio-group  v-model="mdl.exportType" @change="exportTypeChange" >
                            <a-radio-button  value="init">{{i18n("init","初始化")}}</a-radio-button>
                            <a-radio-button value="update">{{i18n("update","更新")}}</a-radio-button>
                        </a-radio-group>
                    </div>
                    <template>
                        <div style="margin: 15px 0px">
                            <a-alert :message="i18n('initApp','初始化应用')" type="info" v-if="mdl.exportType=='init'">
                                <template #description>
                                    <p>{{i18n('initMessage1','初始化的配置选项分为前端、后端、数据库脚本')}}</p>
                                    <p>{{i18n('initMessage2','前端导出选项分为PC端(电脑端)、移动端(H5)')}}</p>
                                    <p>{{i18n('initMessage3','数据库脚本配置选项分为配置表(应用的配置数据')}}</p>
                                    <p>{{i18n('initMessage4','例如表单设计[form_pc])、实体表结构(业务表的创表语句)、实体基础表初始化数据、用户部门与权限配置等')}}</p>
                                </template>
                            </a-alert>
                            <a-alert :message="i18n('updateApp','更新应用')" type="info" v-else>
                                <template #description>
                                    <p>{{i18n('updateMessage1','主要用于已独立部署的应用做配置更新操作')}}</p>
                                    <p>{{i18n('updateMessage2','例如将新配置的表单列表等或新增了实体基础表与数据，就可使用应用更新')}}</p>
                                    <p>{{i18n('updateMessage3','注意生成的是一个JSON配置的压缩包，需要管理员在应用运行状态下点击左下方按钮【安装升级】上传更新应用')}}</p>
                                </template>
                            </a-alert>
                        </div>
                    </template>
                    <template v-if="mdl.exportType=='init'">
                        <a-form-model-item :label="i18n('exportOption','导出选项')" prop="exportOption" >
                            <a-checkbox-group v-model="mdl.exportOption" @change="onChange">
                                <a-checkbox value="front">{{i18n('front','前端')}}</a-checkbox>
                                <a-checkbox value="java">{{i18n('java','后端')}}</a-checkbox>
                                <a-checkbox value="db">{{i18n('db','数据库脚本')}}</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('frontOption','前端导出选项')" prop="frontOption" v-if="mdl.exportOption.includes('front')">
                            <a-checkbox-group v-model="mdl.frontOption">
                                <a-checkbox value="pc">{{i18n('pc','PC端')}}</a-checkbox>
                                <a-checkbox value="mobile">{{i18n('mobile','移动端')}}</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                    </template>
                    <a-form-model-item :label="i18n('dbOption','脚本配置选项')" prop="dbOption" v-if="mdl.exportOption.includes('db')">
                        <a-checkbox-group v-model="mdl.dbOption">
                            <a-checkbox value="1">{{i18n('dbOption1','配置表')}}</a-checkbox>
                            <a-checkbox value="2" v-show="mdl.exportType!='update'">{{i18n('dbOption2','实体表结构')}}</a-checkbox>
                            <a-checkbox value="3">{{i18n('dbOption3','实体表基础数据')}}</a-checkbox>
                            <a-checkbox value="4" v-show="mdl.exportType=='update'">{{i18n('dbOption4','用户部门与权限配置')}}</a-checkbox>
                        </a-checkbox-group>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {Util,RxDialog,RxLayout} from '@lowcode/jpaas-common-lib';
import SysAppApi from "@/api/system/core/sysApp";
/**
 * 应用下载弹窗.
 *
 */
export default {
    name: "AppDownloadDialog",
    props:["layerid","destroy","app"],
    components: {
        RxDialog,
        RxLayout,
    },
    data() {
        return {
            mdl:{
                //导出类型
                exportType:"init",
                //需要导出的应用ID
                appId:"",
                //导出选项
                exportOption:[],
                //前端选项
                frontOption:[],
                //脚本配置选项
                dbOption:[],
            },
            rules: {
                exportOption: [{required: true, message: this.i18n("exportOption","请选择导出选项","select") , trigger: 'change'}],
                frontOption: [{required: false, message:this.i18n("frontOption","请选择前端导出选项","select") , trigger: 'change'}],
                dbOption: [{required: false, message: this.i18n("dbOption","请选择脚本配置选项","select"), trigger: 'change'}],
            },
        }
    },
    created(){
        this.mdl.appId = this.app.appId;
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "appDownloadLang", key);
        },
        onChange(values){
            //设置前端选项必填
            if(values && values.includes('front')){
                this.rules.frontOption[0].required=true;
            }else {
                this.rules.frontOption[0].required=false;
            }
            //设置数据库导出类型必填
            if(values && values.includes('db')){
                this.rules.dbOption[0].required=true;
            }else {
                this.rules.dbOption[0].required=false;
            }
        },
        exportTypeChange(e){
            this.mdl.dbOption=[]
            if(e.target.value == "update"){
                this.mdl.exportOption=["db"];
                this.rules.dbOption[0].required=true;
            }else {
                this.mdl.exportOption=[];
                this.rules.dbOption[0].required=false;
            }
        },
        handleSubmit(vm) {
            let self = this;
            this.$refs.form.validate(valid => {
                if (valid) {
                    SysAppApi.downloadApp(self.mdl).then(res=>{
                        if(!res.success){
                            vm.loading = false ;
                            this.$message.error("下载失败，详细请查看错误日志！");
                            return;
                        }
                        Util.closeWindow(self, "ok");
                    });
                }else {
                    vm.loading = false ;
                }
            });
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        },
    }
}
</script>

<style scoped>
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>